<template>
    <!--    <Header></Header>-->
    <div class="wrapper">


        <!--    <div class="way">Home <span>></span> Models <span>></span> <span class="currentTab">{{ title }}</span></div>-->

        <ModelViewEXEEDMediaInfo v-if="pageContent.main_img" :img="pageContent.main_img" :des="des"
                            :article="pageContent.ref_article"></ModelViewEXEEDMediaInfo>
        <ModelViewEXEEDFeature v-if="pageContent.feature && pageContent.feature.main_img" :img="pageContent.feature.main_img"
                          :des="pageContent.feature.des"
                          :keyPoint="pageContent.feature.key" :title="title"></ModelViewEXEEDFeature>
        <ModelViewEXEEDPicture v-if="pageContent.ref_image" :imgs="pageContent.ref_image"></ModelViewEXEEDPicture>
        <ModelViewEXEEDMedia
                v-if="pageContent.ref_video && pageContent.ref_video.resourceUrl"
                :resourceUrl="pageContent.ref_video.resourceUrl"
                :coverUrl="pageContent.ref_video.coverUrl"
                :title="title"
                :des="pageContent.ref_video.des"
                :publishTime="pageContent.ref_video.publishTime"></ModelViewEXEEDMedia>
        <ModelViewEXEEDDetail v-if="pageContent.model_info" :data="pageContent.model_info" :title="title"></ModelViewEXEEDDetail>
<!--        <ModelViewEXEEDPressContacts :data="pageContent.pressContact"></ModelViewEXEEDPressContacts>-->
        <PressContacts :data="pageContent.pressContact"></PressContacts>
        <ModelViewEXEEDNEInformation></ModelViewEXEEDNEInformation>

    </div>
    <!--    <Footer></Footer>-->
</template>

<script setup lang="ts">
    import {onMounted} from 'vue';

    import {ref, reactive} from 'vue'

    const router = useRouter()
    const route = useRoute()
    const config = useRuntimeConfig();
    const apiURL = config.public.apiURL;

    useHead({
        title: 'Exeed Newsroom',//网站标题
        link: [//网站link，可以在这里引入css和icon等
            {rel: 'shortcut icon', href: '/images/favicon.ico'},
            {rel: 'apple-touch-icon', href: '/images/favicon.ico'}
        ]
    })

    // import Swiper from 'swiper';
    const token = route.query.token;
    const {data: content} = token ? await useFetch(`/api/page/getSketchById?id=${route.params.id}&token=${token}`) : await useFetch(`/api/page/getPageById?id=${route.params.id}`);

    let searchText = ref('')

    const title = ref('');
    const type = ref('')
    const time = ref(new Date().getTime())
    const des = ref('');

    const pageContent = ref('');

    if (!content.value.data) {
        router.push("/error")
    }

    if (content.value.data) {
        if (content.value.data.publishTime && content.value.data.publishTime > 0) {
            time.value = content.value.data.publishTime;
        }
        des.value = content.value.data.des;
        pageContent.value = content.value.data.pageContent;
        // console.log(pageContent.value)
        title.value = pageContent.value.ref_model;
    }

    let count = 0;
    onMounted(() => {
        // let swiper1 = new Swiper(".mySwiper1", {
        //     slidesPerView: "auto",
        //     centeredSlides: false,
        //     // spaceBetween: 32,
        //     // grabCursor: true,
        //     loop: true,
        //     // autoplay: {
        //     //     delay: 1000,
        //     //     disableOnInteraction: false
        //     // },
        //     pagination: {
        //         el: ".swiper-pagination",
        //         clickable: true,
        //     },
        // });
        // setInterval(() => {
        //     swiper1.slideNext();
        // }, 3000);
    })
</script>

<style scoped lang="scss">
    .wrapper {
        width: 1920px;
        background-color: #FFFFFF;
    }

    .ex-overview-header {
        position: relative;
        width: 1920px;
        // min-width: 1200px;
        height: 96px;
        background: #372E2C;
        border-radius: 0px 0px 0px 0px;
        opacity: 0.85;
        //position: fixed;
        z-index: 999;
        display: inline-flex;
        align-items: center;

        .ex-header-brand {
            width: 70px;
            // height: 20px;
            font-weight: 400;
            font-size: 18px;
            color: #C78E66;
            line-height: 15px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 160px;
        }

        .ex-header-brand-title {
            width: 104px;
            height: 21px;
            font-weight: 400;
            font-size: 18px;
            color: #FFFFFF;
            line-height: 15px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .ex-header-brand-logo {
            position: absolute;
            left: 866px;
            top: 24px;

            // transform: translate(-50%, -50%);
            img {
                width: 190px;
            }
        }


        .ex-header-brand-search {
            position: absolute;
            right: 160px;
            top: 30px;
            // transform: translateY(-50%);

            .ex-header-brand-search-wrapper {
                padding-bottom: 8px;
                width: 400px;
                border-bottom: 1px solid #FFFFFF;
                display: flex;
                align-items: center;
                /* 垂直居中所有子元素 */
                justify-content: start;

                /* 子元素向行的起始位置对齐 */
                img {
                    cursor: pointer;
                    margin-right: 7px;
                    width: 24px;
                }

                input {
                    border: none;
                    /* 移除边框 */
                    outline: none;
                    /* 在选中时移除轮廓线 */
                    background-color: transparent;
                    /* 设置背景色为透明 */
                    caret-color: #ffffff;
                    /* 字体大小 */
                    font-size: 14px;
                    color: #FFFFFF;
                }

                input::-webkit-input-placeholder {
                    font: 14px
                }
            }
        }

    }

    .way {
        width: 1740px;
        height: 50px;
        padding: 0px 90px;
        padding-top: 126px;
        vertical-align: middle;

        .currentTab {
            font-size: 16px;
            font-weight: 400;
            color: #C78E66;
        }
    }

    /*
    .em-more-btn {
        margin-top: 65px;
        width: 296px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background: rgb(199, 142, 102, 0.08);
        border-bottom: 4px solid #C78E66;
        color: #000000;
    }
    */

    .ex-footer {
        position: relative;
        width: 1920px;
        height: 480px;
        background-color: #372E2C;

        .logo {
            margin-top: 60px;
            margin-left: 130px;
            width: 190px;

        }

        .ef-bottom {
            height: 120px;
            width: 1920px;
            position: absolute;
            left: 0;
            bottom: 0;
            color: rgba(255, 255, 255, 0.45);
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid rgba(255, 255, 255, 0.15);
            padding: 40px 160px 60px 160px;

            span {
                margin-right: 32px;
            }

            img {
                width: 32px;
                height: 32px;
                margin-right: 40px;
            }

            img:hover {
                background-color: #C78E66;
                border-radius: 50%;
            }
        }
    }

    .inline {
        display: inline-block;
    }

    .link {
        cursor: pointer;
    }

    .link:hover {
    }
</style>
